<template>
    <div class="login">
        <el-row :gutter="20">
            <el-col :span="12" style="padding-right: 0;">
                <div class="login-left">
                    <img src="../assets/logo/logo.png" alt="">
                    <p>城市管理处置系统</p>
                </div>
            </el-col>
            <el-col :span="12" style="padding-left: 0;">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                    <!--<h3 class="title">城市管理处置系统</h3>-->
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                v-model="loginForm.password"
                                type="password"
                                auto-complete="off"
                                placeholder="请输入密码"
                                @keyup.enter.native="handleLogin"
                        >
                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" style="position: relative;margin-bottom: 30px;">
                        <el-input
                                v-model="loginForm.code"
                                auto-complete="off"
                                placeholder="请输入验证码"
                                @keyup.enter.native="handleLogin"
                        >
                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
                        </el-input>
                        <div class="login-code">
                            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                        </div>
                    </el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
                    <el-form-item style="width:100%;">
                        <el-button
                                class="login-btn"
                                :loading="loading"
                                size="medium"
                                type="primary"
                                style="width:100%;background-color: #92231c;border-color: #92231c;"
                                @click.native.prevent="handleLogin">
                            <span v-if="!loading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--  底部  -->
        <div class="el-login-footer">
            <!--<span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>-->
        </div>
    </div>
</template>

<script>
    import { getCodeImg } from '@/api/login'
    import Cookies from 'js-cookie'
    import { encrypt, decrypt } from '@/utils/jsencrypt'

    export default {
        name: 'Login',
        data() {
            return {
                codeUrl: '',
                cookiePassword: '',
                loginForm: {
                    username: '',
                    password: '',
                    rememberMe: false,
                    code: '',
                    uuid: ''
                },
                loginRules: {
                    username: [
                        { required: true, trigger: 'blur', message: '用户名不能为空' }
                    ],
                    password: [
                        { required: true, trigger: 'blur', message: '密码不能为空' }
                    ],
                    code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
                },
                loading: false,
                redirect: undefined
            }
        },
        watch: {
            $route: {
                handler: function(route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        created() {
            this.getCode()
            this.getCookie()
        },
        mounted(){
            console.log(this.$refs.loginForm);
        },
        methods: {
            getCode() {
                getCodeImg().then(res => {
                    this.codeUrl = 'data:image/gif;base64,' + res.img
                    this.loginForm.uuid = res.uuid
                })
            },
            getCookie() {
                const username = Cookies.get('username')
                const password = Cookies.get('password')
                const rememberMe = Cookies.get('rememberMe')
                this.loginForm = {
                    username: username === undefined ? this.loginForm.username : username,
                    password: password === undefined ? this.loginForm.password : decrypt(password),
                    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
                }
            },
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        if (this.loginForm.rememberMe) {
                            Cookies.set('username', this.loginForm.username, { expires: 30 })
                            Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
                            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
                        } else {
                            Cookies.remove('username')
                            Cookies.remove('password')
                            Cookies.remove('rememberMe')
                        }
                        this.$store
                            .dispatch('Login', this.loginForm)
                            .then(() => {
                                this.$router.push({ path: this.redirect || '/' })
                            })
                            .catch(() => {
                                this.loading = false
                                this.getCode()
                            })
                    }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        /*background-image: url("../assets/image/login-background.jpg");*/
        background-image: url("../assets/image/login-bg.png");
        background-size: cover;
        .login-left{
            background: rgba(0, 0, 0, 0.5);
            width:572px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            height: 489.38px;
            img{
                margin:23px 0px 24px;
            }
            p{
                color:#fff;
                font-size: 0.5rem;
                width: 100%;
                text-align: center;
                letter-spacing: 6px;
                font-family: fantasy;
            }
        }
        .el-form-item {
            margin-bottom: 38px;
            &:nth-of-type(2){
                margin: 41px 0;
            }
        }
        .el-checkbox{
            .el-checkbox__label {
                display: inline-block;
                padding-left: 10px;
                line-height: 21px;
                font-size: 15px;
            }
            .el-checkbox__inner{
                width:18px;
                height:18px;
                &::after{
                    width: 5px;
                    height: 8px;
                    left: 5px;
                }
            }
            .el-checkbox__input.is-checked .el-checkbox__inner {
                background-color: #2f3945;
                border-color: #2f3945;
            }
            .el-checkbox__inner:hover {
                border-color: #2f3945;
            }
            .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #606266;
            }
        }
        .login-btn {
            color: #FFFFFF;
            border-radius:22px;
            font-size: 16px;
        }
    }
    .title {
        margin: 0 auto 30px auto;
        text-align: center;
        color: #FFFFFF;
    }
    .login-form {
        //background: rgba(25, 132, 200, .3);
        background: #f9fbfa;
        width: 572px;
        padding: 60px 76px 44px;
        .el-input {
            height: 50px;
            input {
                height: 50px;
                border: none;
                border-bottom: 1px solid #ccc;
                outline: none;
                border-radius: 0;
                font-size: 17px;
                padding-left: 42px;
                background-color: #f9fbfa;
            }
        }
        .input-icon {
            height: 23px;
            width: 21px;
            margin-left: 2px;
            margin-top:14px;
        }
    }

    .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
    }

    .login-code {
        //width: 33%;
        height: 38px;
        float: right;
        position: absolute;
        right: 0;
        bottom: 10px;
        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .login-code-img {
        height: 38px;
    }
</style>
